<template>
    <div>
        <el-dialog title="编辑入库单" :visible.sync="visible" :before-close="conmel" width="1200px">
            <div class="botcenten">
                <div>
                    <el-form label-position='right' ref="form" :model="form" :rules="rules" :inline="true"
                        class="demo-form-inline">
                        <el-form-item label="耗材入库主题:" label-width="200px" prop="storeName">
                            <el-input v-model="form.storeName" placeholder="请输入耗材入库主题"></el-input>
                        </el-form-item>
                        <el-form-item label="入库来源:" label-width="200px" prop="storeSource">
                            <el-select class="handle-select" v-model="form.storeSource" placeholder="请选择入库来源">
                                <el-option v-for="item in proSourcelist" :key="item.id" :label="item.proSource"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入库仓库:" label-width="200px">
                            <el-input v-model="form.repositoryName" disabled> </el-input>
                        </el-form-item>
                        <el-form-item label="入库备注:" label-width="200px" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入入库备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider></el-divider>
                <div>
                    <el-table :data="tableData" border class="table" ref="multipleTable"
                        header-cell-class-name="table-header">

                        <el-table-column type="index" label="序号" width="60" align='center'>
                            <template slot-scope="scope">
                                {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="consumName" label="物品名称" align='center'></el-table-column>
                        <el-table-column prop="consumStandard" label="规格型号" align='center'></el-table-column>
                        <el-table-column prop="consumUnit" label="计量单位" align='center'></el-table-column>
                        <el-table-column prop="consumNum" label="数量" align='center'></el-table-column>
                        <el-table-column prop="consumPrice" label="单价" align='center'></el-table-column>
                        <el-table-column prop="name" label="金额" align='center'>
                            <template slot-scope="scope">
                                <span>{{ scope.row.consumNum * scope.row.consumPrice }}</span>
                            </template>

                        </el-table-column>
                        <el-table-column prop="repositoryName" label="仓库" align='center'></el-table-column>

                    </el-table>
                    <div class="pagination">
                        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                            :page-size="query.pageSize" :total="pageTotal"
                            @current-change="handlePageChange"></el-pagination>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="conmel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { proSource, detailByPage, storeedit } from '../../../../api/index'
export default {
    name: "in-edit",
    props: {
        visible: {
            type: Boolean,
            required: true
        }
    },
    watch: {

    },
    components: {
    },
    data() {
        return {
            query: {
                storeId: '',
                pageNum: 1,
                pageSize: 5,
            },
            pageTotal: 0,
            tableData: [],
            form: {},
            proSourcelist: [],
            rules: {
                storeName: [
                    { required: true, message: '耗材入库主题不能为空', trigger: 'blur' },
                ],
                storeSource: [
                    { required: true, message: '入库来源不能为空', trigger: 'change' },
                ],
                remark: [
                    { required: true, message: '入库备注不能为空', trigger: 'blur' },
                ],

            }
        }
    },
    mounted() {

    },
    methods: {
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    const data = {
                        id: this.form.id,
                        storeName: this.form.storeName,
                        storeSource: this.form.storeSource,
                        remark: this.form.remark,
                    }
                    await storeedit(data)
                    this.$emit('refresh')
                    this.conmel()
                } else {
                    return false;
                }
            });

        },
        open(e) {
            this.form = { ...e }
            this.query.storeId = e.id
            this.proSources()
            this.detailByPages()
        },
        async detailByPages() {
            const data = await detailByPage(this.query)
            this.tableData = data.data.data.records
            this.pageTotal = data.data.data.total
        },
        async proSources() {
            const data = await proSource()
            this.proSourcelist = data.data.data
        },
        conmel() {
            // 清空表单
            this.$refs.form.resetFields();
            this.query.pageNum = 1

            this.$emit('close')
        },
        handlePageChange(e) {
            this.query.pageNum = e
            this.detailByPages()
        }
    }

}
</script>


<style lang="less" scoped>
::v-deep .el-input {
    width: 200px;
}

::v-deep .el-textarea {
    width: 500px;
}



.buttoncenter {
    margin-bottom: 10px;
    float: right;
}
</style>